<%-- 
    Document   : log01020
    Created on : Nov 17, 2012, 10:57:59 PM
    Author     : HoangTN
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>

        <jsp:useBean id="projects" class="vn.edu.fpt.xml.hrm.common.Marshall" />
        <% projects.getAllProjectToXML(getServletContext().getRealPath("/") + "WEB-INF/projects.xml");%>

        <title>Create Timesheet</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="<%= request.getContextPath()%>/styles/layout.css" rel="stylesheet"
              type="text/css" media="screen" />
        <script src="<%=request.getContextPath()%>/js/arial.js"></script>
        <script src="<%=request.getContextPath()%>/js/cuf_run.js"></script>
        <script src="<%=request.getContextPath()%>/js/cufon-yui.js"></script>
        <script src="<%=request.getContextPath()%>/js/dateUtil.js"></script>
        <script src="<%=request.getContextPath()%>/js/employee.js"></script>
        <script src="<%=request.getContextPath()%>/js/index.js"></script>
        <script src="<%=request.getContextPath()%>/js/menu.js"></script>
        <script src="<%=request.getContextPath()%>/js/tableUtil.js"></script>

        <script type="text/javascript" src="<%=request.getContextPath()%>/js/dateUtil.js"></script>
        <script type="text/javascript">
            function validateUpdate(form) {
                var txtdate = document.getElementsByName("txtDate");
                var txtdur = document.getElementsByName("txtDuration");
                var error = [];
                var notEmpty = false;
                for (var i = 0 ; i < txtdate.length ; i++){
                    if (txtdate[i].value){
                        notEmpty = true;
                        if (!isDate(txtdate[i].value)){
                            error[error.length] = "You must enter a validate date (dd//MM//yyyy)";
                        }
                        var num = txtdur[i].value;
                        if (isNaN(num) || num>8 || num <=0){
                            error[error.length] = "Duration is greater than 0 and less than or equal to 8 (hour)";
                        }
                    }
                }
                if (!notEmpty) {
                    error[error.length] = "Please input something!";
                }
                if(error.length>0){
                    executeError(error);
                    return false;
                }
                return true;
            }
            function executeError(errors){
                var msg = "There is some errors...\n";
                for (var i =0 ; i < errors.length; i++){
                    var numErr = i+1;
                    msg += "\n" + numErr + " - " + errors[i];
                }
                alert(msg);
            }
        </script>

    </head>
    <body id="top">

        <c:if test="${empty sessionScope.USER}">
            <% response.sendRedirect(request.getContextPath() + "/index.jsp");%>
        </c:if>

        <div class="wrapper col1">
            <div id="header">
                <div id="logo">
                    <h1><a href="<%=request.getContextPath()%>/welcome.jsp">BusinessToday</a></h1>
                    <p><strong>Free CSS Website Template</strong></p>
                </div>
                <div id="newsletter">
                    <p><i>Welcome, ${sessionScope.ROLE}
                            <font color="red" size="4">
                                <strong> ${sessionScope.USER}</strong>
                            </font></i>
                    </p>
                    <p align="right"><a href="<%= request.getContextPath()%>/LogoutController">Log out</a> </p>
                </div>
                <br class="clear" />
            </div>
        </div>

        <%@include file="/jsp/common/menu_timesheet_field.jsp" %>

        <div class="wrapper col5" style="height: 50%;">
            <div id="container">

                <!---->

                <c:set var="check" value="${requestScope.checked}"/>
                <c:if test="${not empty check}">
                    <h3><i>Add new successfully</i></h3>
                </c:if>

                <h1>New Timesheet</h1>
                <form action="<%=request.getContextPath()%>/NewActivitiesController" method="post">

                    <c:import url="/WEB-INF/projects.xml" var="xml"/>
                    <x:parse var="doc" xml="${xml}" scope="session"/>

                    <table id="tableToGetRow" cellspacing="0" border="1">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Description</th>
                                <th>Project</th>
                                <th>Duration</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" name="txtDate" placeholder="dd/MM/yyyy" /></td>
                                <td><input type="text" name="txtDescription" /></td>
                                <td>
                                    <select name="cboProject" style ="width: 150px">
                                        <x:forEach var="proj" select="$doc//name">
                                            <option value="<x:out select="$proj"/>" ><x:out select="$proj"/></option>
                                        </x:forEach>
                                    </select>
                                </td>
                                <td><input type="text" name="txtDuration" /></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="txtDate" placeholder="dd/MM/yyyy" /></td>
                                <td><input type="text" name="txtDescription" /></td>
                                <td>
                                    <select name="cboProject" style ="width: 150px">
                                        <x:forEach var="proj" select="$doc//name">
                                            <option value="<x:out select="$proj"/>" ><x:out select="$proj"/></option>
                                        </x:forEach>
                                    </select>
                                </td>
                                <td><input type="text" name="txtDuration" /></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="txtDate" placeholder="dd/MM/yyyy" /></td>
                                <td><input type="text" name="txtDescription" /></td>
                                <td>
                                    <select name="cboProject" style ="width: 150px">
                                        <x:forEach var="proj" select="$doc//name">
                                            <option value="<x:out select="$proj"/>" ><x:out select="$proj"/></option>
                                        </x:forEach>
                                    </select>
                                </td>
                                <td><input type="text" name="txtDuration" /></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="txtDate" placeholder="dd/MM/yyyy" /></td>
                                <td><input type="text" name="txtDescription" /></td>
                                <td>
                                    <select name="cboProject" style ="width: 150px">
                                        <x:forEach var="proj" select="$doc//name">
                                            <option value="<x:out select="$proj"/>" ><x:out select="$proj"/></option>
                                        </x:forEach>
                                    </select>
                                </td>
                                <td><input type="text" name="txtDuration" /></td>
                            </tr>
                        </tbody>
                    </table>
                    <br/><br/>
                    <input type="button" value="Back" onclick="goBack()">
                    <input type="button" value="Add row" onclick="javascript:addNewRow()">
                    <input type="button" value="Remove last row" onclick="javascript:delRow()">
                    <input type="submit" name="action" value="Submit" onclick="return validateUpdate(this);"/>
                    <!--onclick="return validateUpdate(this);" -->
                </form>
                <script>
                    function addNewRow()
                    {
                        var tbody = document.getElementById("tableToGetRow").tBodies[0];
                        var row = tbody.rows[tbody.rows.length - 1].cloneNode(true);
                        tbody.appendChild(row);
                    }
                    function delRow()
                    {
                        var tbody = document.getElementById("tableToGetRow").tBodies[0];
                        tbody.deleteRow(tbody.rows.length - 1);
                    }
                    function goBack()
                    {
                        window.history.back()
                    }
                </script>


                <!---->
                <br class="clear" />
            </div>
        </div>

        <%@include file="/jsp/common/footer_field.jsp" %>
        <%@include file="/jsp/common/copyright_field.jsp" %>

    </body>
</html>
